<template>
  <div class="login-wrap" id="#app" :style="note">
    <div class="log" style="margin-top: 95px;">
      <div style="width:550px;">
        <img
          src="../icon标/阿尔脉LOGO4-透明.png"
          alt=""
          style="margin-top:5%;margin-left:6%;"
        />
        <img
          src="../icon标/组 8.png"
          alt=""
          width="500px;"
          style="padding-left:80px;"
        />
      </div>

      <div style="width:500px;" v-if="tab == 1">
        <el-form
          status-icon
          label-position="left"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm login-container"
        >
          <h3 class="title1" style="color:#333333;">欢迎登录数据管理平台</h3>
          <el-tabs
            @tab-click="handleClick('ruleForm', 'telForm')"
            v-model="activeName"
            style="margin-top:-20px;"
          >
            <el-tab-pane label="账号密码登录" name="first"
              ><el-form-item prop="username" style="margin-top:10px;">
                <el-input
                  type="text"
                  v-model.trim="ruleForm.username"
                  auto-complete="off"
                  placeholder="输入用户名"
                >
                  <i
                    slot="prefix"
                    class="el-icon-user-solid"
                    style="color:#CCCCCC;margin-left:5px;"
                  ></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  v-model.trim="ruleForm.password"
                  auto-complete="off"
                  placeholder="输入密码"
                >
                  <i
                    slot="prefix"
                    class="el-icon-lock"
                    style="color:#CCCCCC;margin-left:5px;"
                  ></i
                ></el-input>
              </el-form-item>
              <el-form-item prop="verifycode">
                <div style="display:flex" class="yanzheng">
                  <el-input
                    v-model.trim="ruleForm.verifycode"
                    placeholder="请输入验证码"
                    @keyup.enter.native="login('ruleForm')"
                  >
                    <i
                      slot="prefix"
                      class="el-icon-price-tag"
                      style="color:#CCCCCC;margin-left:5px;"
                    ></i
                  ></el-input>
                  <span @click="refreshCode" style="cursor:pointer;" id="code">
                    <s-identify :identifyCode="identifyCode"></s-identify>
                  </span>
                </div>
              </el-form-item>
              <div style="margin-top:-5px;font-size:14px;">
                <el-checkbox
                  class="remember"
                  v-model="rememberpwd"
                  style="color:#333333;"
                  >下次自动登录</el-checkbox
                >
              </div>
<!--              <div class="check">-->
<!--                <div style="margin-top:-20px;margin-bottom:15px;">-->
<!--                  <span style="font-size:14px;color:#333333">没有账号？</span-->
<!--                  ><el-link-->
<!--                    :underline="false"-->
<!--                    style="margin-top:-3px;"-->
<!--                    type="primary"-->
<!--                    @click="-->
<!--                      qiehuan();-->
<!--                      resetForm('ruleForm');-->
<!--                    "-->
<!--                    >立即注册></el-link-->
<!--                  >-->
<!--                </div>-->
<!--                <div style="margin-top:-20px;margin-bottom:15px;">-->
<!--                  <span style="font-size:14px;">忘记密码？</span-->
<!--                  ><el-link-->
<!--                    style="margin-top:-3px;font-size:14px;"-->
<!--                    type="primary"-->
<!--                    :underline="false"-->
<!--                    @click="-->
<!--                      qiehuan3();-->
<!--                      resetForm('ruleForm');-->
<!--                    "-->
<!--                    >点此重置></el-link-->
<!--                  >-->
<!--                </div>-->
<!--              </div>-->

              <el-form-item style="width:100%;">
                <el-button
                  type="primary"
                  style="width:100%;border-radius:25px;background: #4087FC;"
                  @click="submitForm('ruleForm')"
                  :loading="logining"
                  >登录</el-button
                >
              </el-form-item></el-tab-pane
            >

            <el-tab-pane label="手机号登录" name="second">
              <el-form
                style="padding:0px;margin-top:10px;"
                status-icon
                label-position="left"
                :model="telForm"
                :rules="telrules"
                ref="telForm"
                label-width="0px"
                class="demo-ruleForm login-container"
              >
                <el-form-item prop="tel">
                  <el-row :gutter="25">
                    <el-col :span="15">
                      <el-input
                        v-model="telForm.tel"
                        auto-complete="off"
                        placeholder="手机号"
                      >
                        <i
                          slot="prefix"
                          class="el-icon-phone"
                          style="color:#CCCCCC;margin-left:5px;"
                        ></i>
                      </el-input>
                    </el-col>
                    <el-col :span="8">
                      <el-button
                        type="primary"
                        @click="gettelCode(telForm.tel)"
                        :disabled="!show"
                        style="width:125px;border-radius:0px;"
                      >
                        <span v-show="show">发送验证码</span>
                        <span v-show="!show" class="count"
                          >{{ count }}s后再次获取</span
                        >
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item prop="telcode">
                  <el-input
                    v-model.trim="telForm.telcode"
                    auto-complete="off"
                    placeholder="验证码"
                  >
                    <i
                      slot="prefix"
                      class="el-icon-price-tag"
                      style="color:#CCCCCC;margin-left:5px;"
                    ></i>
                  </el-input>
                </el-form-item>
                <div>
                  <el-checkbox
                    class="remember"
                    v-model="rememberpwd"
                    style="color:#333333"
                    >下次自动登录</el-checkbox
                  >
                </div>
                <div class="check">
<!--                  <div style="margin-top:-15px;margin-bottom:20px;">-->
<!--                    <span style="font-size:14px;color:#333333">没有账号？</span-->
<!--                    ><el-link-->
<!--                      :underline="false"-->
<!--                      style="margin-top:-3px;"-->
<!--                      type="primary"-->
<!--                      @click="-->
<!--                        qiehuan();-->
<!--                        resetForm('ruleForm');-->
<!--                      "-->
<!--                      >立即注册></el-link-->
<!--                    >-->
<!--                  </div>-->
                  <div style="margin-top:-15px;margin-bottom:20px;">
                    <span style="font-size:14px;">忘记密码？</span
                    ><el-link
                      style="margin-top:-3px;font-size:14px;"
                      type="primary"
                      :underline="false"
                      @click="
                        qiehuan3();
                        resetForm('ruleForm');
                      "
                      >点此重置></el-link
                    >
                  </div>
                </div>

                <el-form-item style="width:100%;">
                  <el-button
                    type="primary"
                    style="width:100%;border-radius:25px;background: #4087FC;"
                    @click="submitForm('telForm')"
                    :loading="logining"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <div class="otherway">
            <div
              style="width: 90px;
            height: 1px;
            background: #CCCCCC;"
            ></div>
            <div style="margin-left:15px;margin-right:15px;font-size:14px;">
              <span>第三方登录</span>
            </div>
            <div
              style="width: 90px;
            height: 1px;
            background: #CCCCCC;"
            ></div>
          </div>
          <div
            style="display:flex;justify-content:center;margin-top:15px;margin-bottom:15px;"
          >
            <img src="../icon标/qq.png" alt="" />
            <img
              src="../icon标/微信.png"
              alt=""
              style="margin-left:30px;margin-right:30px;"
            />
            <img src="../icon标/微博.png" alt="" />
          </div>
        </el-form>
      </div>

      <div width="450px;" v-if="tab == 2">
        <el-form
          status-icon
          label-position="left"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm login-container"
        >
          <h3 class="title1" style="color:#333333">注册新用户</h3>
          <el-form-item prop="username" style="margin-top:-10px;">
            <el-input
              type="text"
              v-model.trim="ruleForm.username"
              auto-complete="off"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-row :gutter="35">
              <el-col :span="15">
                <el-input
                  v-model="ruleForm.email"
                  auto-complete="off"
                  placeholder="邮箱"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                  type="primary"
                  @click="getCode(ruleForm.email)"
                  :disabled="!show"
                  style="width:125px;border-radius:0px;"
                >
                  <span v-show="show">发送验证码</span>
                  <span v-show="!show" class="count"
                    >{{ count }}s后再次获取</span
                  >
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="emailcode">
            <el-input
              v-model.trim="ruleForm.emailcode"
              auto-complete="off"
              placeholder="验证码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model.trim="ruleForm.password"
              auto-complete="off"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="confirmPwd">
            <el-input
              type="password"
              v-model.trim="ruleForm.confirmPwd"
              auto-complete="off"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>

          <div style="display:flex;font-size:14px;margin-top:20px;">
            <el-checkbox v-model="checked" style="margin-bottom:30px;"
              >我已阅读并接受以下条款:</el-checkbox
            >
            <el-link
              type="primary"
              :underline="false"
              style="margin-top:-30px;"
              @click="centerDialogVisible = true"
            >
              《隐私权政策》&《使用协议 》</el-link
            >
          </div>
          <el-dialog
            title="《隐私权政策》&《使用协议 》"
            :visible.sync="centerDialogVisible"
            width="65%"
            right
            :modal="false"
          >
          <hr
        style=" margin-top:-30px;border:none;background:#cbdcf8;height:1.5px;"
      />
      <hr
        style="margin-top:-9px;border:none;height:3px;width:260px;background:#4087fc;margin-left:0px;"
      />
            <span style="fonnt-size:16px;line-height:25px;"
              >Network Working Group A. Sollaud Request for Comments: 4749
              France Telecom Category: Standards Track October 2006 RTP Payload
              Format for the G.729.1 Audio Codec Status of this Memo This
              document specifies an Internet standards track protocol for the
              Internet community, and requests discussion and suggestions for
              improvements. Please refer to the current edition of the "Internet
              Official Protocol Standards" (STD 1) for the standardization state
              and status of this protocol. Distribution of this memo is
              unlimited. Copyright Notice Copyright (C) The Internet Society
              (2006). Abstract
              泱泱古国，悠悠华夏。五千年的历史轨迹，五千年的文化传承。五千年的风霜雨雪没有将龙的传人的那些优良传统埋没，而是历久弥新，薪尽火传，古人推崇诚信者，今人厚爱诚信者，
              　　历史选择诚信者。
              　　孔曰成仁，孟曰取义。仁者，发乎礼，义者，发乎情，止乎心，正乎身。在儒家看来，行仁施义的先决条件为内心的向善，所谓勤心诚意者也。心中信守诚信，方能宁静安心，进而修身
              　　、齐家、治国、平天下，行义者亦应以诚信为本。义之所存，诚信存之也，读《大学》《中庸》，一字以蔽之，诚也，诚包罗万象，诚信是它的具体体现。
              　　在滚滚而来，浩荡而去的历史长河中，涌现出的诚信者比比皆是，荆轲于"风萧萧兮易水寒"中作别太子丹，壮士一去，只为报知遇之恩，虽蹈死地亦无怨无悔。伍子胥逃离楚国，得吴王
              　　重用，答应替他报仇，从此伍子胥尽心辅佐，纵然之后受猜忌可仍然不改忠心。陶朱公荡舟西湖之上，得以"千金散尽还复来"的秘诀便是诚信经商，后世徽商，晋商皆履行了这一原则，才有
              　　了商行的繁荣昌盛。
              　　诚信在心，将诚信发挥在经商致富中，能够家财万贯；将诚信This
              document specifies a Real-time Transport Protocol (RTP) payload
              format to be used for the International Telecommunication Union
              (ITU-T) G.729.1 audio codec. A media type registration is included
              for this payload format. specifies an Internet standards track
              protocol for the Internet community, and requests discussion and
              suggestions for improvements. Please refer to the current edition
              of the "Internet Official Protocol Standards" (STD 1) for the
              standardization state and status of this protocol. Distribution of
              this memo is unlimited. Copyright Notice Copyright (C) The
              Internet Society (2006). Abstract This document specifies a
              Real-time Transport Protocol (RTP) payload format to be used for
              the International Telecommunication Union (ITU-T) G.729.1 audio
              codec. A media type registration is included for this payload
              format</span
            >
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <div class="check">
            <div class="denglu">
              <span style="font-size:14px">已有账号？</span
              ><el-link
                style="margin-top:-3px;font-size:14px;"
                type="primary"
                @click="
                  qiehuan2();
                  resetForm('ruleForm');
                "
                :underline="false"
                >立即登录></el-link
              >
            </div>
            <div class="denglu">
              <span style="font-size:14px;">忘记密码？</span
              ><el-link
                style="margin-top:-3px;font-size:14px;"
                type="primary"
                :underline="false"
                @click="
                  qiehuan3();
                  resetForm('ruleForm');
                "
                >点此重置></el-link
              >
            </div>
          </div>
          <el-form-item style="width:100%;">
            <el-button
              type="primary"
              style="width:100%;border-radius:25px;background:#4087FC"
              @click="registerForm('ruleForm')"
              :loading="logining2"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div width="450px;" v-if="tab == 3">
        <el-form
          status-icon
          label-position="left"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm login-container"
        >
          <h3 class="title1" style="color:#333333">重置密码</h3>
          <el-form-item prop="username" style="margin-top:-10px;">
            <el-input
              type="text"
              v-model.trim="ruleForm.username"
              auto-complete="off"
              placeholder="用户名"
              ><i class="fa fa-camera-retro fa-lg icon"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model.trim="ruleForm.password"
              auto-complete="off"
              placeholder="新密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="confirmPwd">
            <el-input
              type="password"
              v-model.trim="ruleForm.confirmPwd"
              auto-complete="off"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-row :gutter="35">
              <el-col :span="15">
                <el-input
                  v-model="ruleForm.email"
                  auto-complete="off"
                  placeholder="邮箱"
                  style="width: 260px;"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                  type="primary"
                  @click="getCode(ruleForm.email)"
                  :disabled="!show"
                  style="width:130px;border-radius:5px;"
                >
                  <span v-show="show">发送验证码</span>
                  <span v-show="!show" class="count"
                    >{{ count }}s后再次获取</span
                  >
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="emailcode">
            <el-input
              v-model.trim="ruleForm.emailcode"
              auto-complete="off"
              placeholder="验证码"
            ></el-input>
          </el-form-item>
          <div
            style="display:flex;justify-content:space-between;margin-top:40px;margin-bottom:30px;"
          >
            <div>
              <span style="font-size:14px;">已有账号？</span
              ><el-link
                style="margin-top:-3px;"
                type="primary"
                :underline="false"
                @click="
                  qiehuan2();
                  resetForm('ruleForm');
                "
                >点此登录></el-link
              >
            </div>
<!--            <div>-->
<!--              <span style="font-size:14px;">没有账号？</span-->
<!--              ><el-link-->
<!--                style="margin-top:-3px;"-->
<!--                type="primary"-->
<!--                :underline="false"-->
<!--                @click="-->
<!--                  qiehuan();-->
<!--                  resetForm('ruleForm');-->
<!--                "-->
<!--                >点此注册></el-link-->
<!--              >-->
<!--            </div>-->
          </div>
          <el-form-item style="width:100%;">
            <el-button
              type="primary"
              style="width:100%;border-radius:25px;background-color:#4087FC;"
              @click="resettingForm('ruleForm')"
              :loading="logining3"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-footer>
      <div
        style="text-align:center;color:#666666;font-size:14px;position:relative;margin-top:-6%;"
      >
        <p>版权所有：苏州阿尔脉生物科技有限公司</p>
        <p>Copyright: ALPHAMA BIOTECHNOLOGY 苏ICP备00000000号</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
import SIdentify from "../components/SIdentify.vue";
import dragVerify from "vue-drag-verify";
import VueCookies from "vue-cookies";
import { getCookie } from "../utils/util";
// import request from '@/utils/request';
var TIME_COUNT = 60;
// import dragVerify from "@/components/core/dragVerify";
export default {
  name: "login",
  components: {
    SIdentify,
    dragVerify
  },
  data() {
    const validateVerifycode = (rule, value, callback) => {
      const newVal = value.toLowerCase();
      const identifyStr = this.identifyCode.toLowerCase();
      if (newVal === "") {
        callback(new Error("请输入验证码"));
      } else if (newVal !== identifyStr) {
        console.log("validateVerifycode:", value);
        callback(new Error("验证码不正确!"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      if (mailReg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的邮箱格式"));
      }
    };
    var validatetel = (rule, value, callback) => {
      var reg = /^1[345789]\d{9}$/;
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号格式"));
      } else {
        callback();
      }
    };
    return {
      centerDialogVisible: false,
      checked: false,
      activeName: "first",
      note: {
        backgroundImage: "url(" + require("../icon标/背景.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center"
      },
      logining: false,
      logining2: false,
      logining3: false,
      show: true, // 初始启用按钮
      count: "", // 初始化次数
      timer: null,
      tab: 1,
      logining: false,
      rememberpwd: false,
      identifyCodes: "123456789ABCDEFGHGKMNPQRSTUVWXY",
      identifyCode: "",
      ruleForm: {
        username: "",
        password: "",
        verifycode: "",
        confirmPwd: "",
        email: "",
        emailcode: ""
      },
      telForm: {
        tel: "",
        telcode: ""
      },
      telrules: {
        telcode: [{ required: true, message: "请输入验证码" }],
        tel: [
          {
            required: true,
            validator: validatetel,
            trigger: ["blur", "change"]
          }
        ]
      },
      rules: {
        verifycode: [
          { required: true, validator: validateVerifycode, trigger: "blur" }
        ],
        username: [{ required: true, message: "请输入用户名" }],
        password: [{ required: true, message: "请输入密码" }],
        confirmPwd: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur"
          }
        ],
        email: [{ required: true, validator: validateEmail }],
        emailcode: [{ required: true, message: "请输入验证码" }]
      },
      // handlerIcon: "fa fa-angle-double-right",
      // successIcon: "fa fa-check",
      // handlerIcon: "fa fa-angle-double-right",
      // successIcon: "fa fa-check",
      // background: "#cccccc",
      // progressBarBg: "#4b0",
      // completedBg: "#66cc66",
      // handlerBg: "#fff",
      // text: "请将滑块拖动到右侧",
      // successText: "验证成功",
      // width: 350,
      // height: 42,
      // textSize: "14px",
      radius: "4px"
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取存在本地的用户名密码
    // this.getuserpwd();
  },
  mounted() {
    // 验证码初始化
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  // 里面的函数只有调用才会执行
  methods: {
    //获取电话的验证码
    gettelCode() {
      this.$refs.telForm.validateField("tel", telError => {
        if (telError) {
          return false;
        } else {
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer); // 清除定时器
                this.timer = null;
              }
            }, 1000);
          }
          this.$axios
            .get("http://localhost:8081/sendEmail", {
              params: {
                email: this.ruleForm.email
              }
            })
            .then(res => {
              this.$message({
                message: "已发送验证码",
                type: "success"
              });
            })
            .catch(res => {
              return (
                (this.show = true),
                this.$message({
                  message: "请求超时，请检查网络连接",
                  type: "error"
                })
              );
            });
        }
      });
    },
    //获取邮箱验证码
    getCode() {
      this.$refs.ruleForm.validateField("email", emailError => {
        if (emailError) {
          return false;
        } else {
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer); // 清除定时器
                this.timer = null;
              }
            }, 1000);
          }
          this.$axios
            .get("http://localhost:8081/sendEmail", {
              params: {
                email: this.ruleForm.email
              }
            })
            .then(res => {
              this.$message({
                message: "已发送验证码",
                type: "success"
              });
            })
            .catch(res => {
              return (
                (this.show = true),
                this.$message({
                  message: "请求超时，请检查网络连接",
                  type: "error"
                })
              );
            });
        }
      });
    },
    canplay() {
      this.vedioCanPlay = true;
    },
    // 获取用户名密码
    // 不大好使※
    // getuserpwd() {
    //   if (getCookie("user") != "" && getCookie("pwd") != "") {
    //     this.ruleForm.username = getCookie("user");
    //     this.ruleForm.password = getCookie("pwd");
    //     this.rememberpwd = true;
    //   }
    // },
    // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },

    //用户名登录
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.logining = true;
          this.$axios({
            method: "post",
            url: "/login",
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            },
            data: {
              username: this.ruleForm.username,
              password: this.ruleForm.password
            }
          })
            .then(res => {
              //请求成功后执行函数
              if (res.data.msg === "登陆成功") {
                //将token保存在cookie里
                this.$cookies.set("token", res.data.data, "365d");
                this.logining = true;
                //登录验证成功路由实现跳转
                this.$store.commit("login", "true");
                this.$router.push({ path: "/add/molecularDesign" });
                // this.$notify({
                //   title: "提示",
                //   message: "用户登录成功",
                //   duration: 3000
                // });
              } else if (res.data.msg === "用户名密码不匹配") {
                this.logining = false;
                this.$message({
                  title: "提示",
                  message: "用户名密码不匹配",
                  duration: 3000,
                  type: "warning"
                });
              } else {
                this.logining = false;
                this.$message({
                  title: "提示",
                  message: "登录失败，请重试",
                  duration: 2000,
                  type: "error"
                });
              }
            })
            .catch(err => {
              this.logining = false;
              //请求错误后执行函数
              this.$message({
                title: "提示",
                message: "用户访问错误",
                duration: 3000,
                type: "error"
              });
            });
        } else {
          this.$refs.ruleForm.validateField("verifycode", verifycodeError => {
            if (verifycodeError) {
              this.identifyCode = "";
              this.makeCode(this.identifyCodes, 4);
              this.validateVerifycode = "";
              this.ruleForm.verifycode = "";
            }
          });
        }
      });
    },
    //电话号登录
    submittelForm(telForm) {
      this.$refs[telForm].validate(valid => {
        if (valid) {
          this.logining = true;
          this.$axios({
            method: "post",
            url: "/login",
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            },
            data: {
              username: this.telForm.tel,
              password: this.telForm.telcode
            }
          })
            .then(res => {
              //请求成功后执行函数
              if (res.data.msg === "登陆成功") {
                //将token保存在cookie里
                this.$cookies.set("token", res.data.data, "365d");
                this.logining = true;
                //登录验证成功路由实现跳转
                this.$store.commit("login", "true");
                this.$router.push({ path: "/add/molecularDesign" });
                // return(this.tab=1),
                // this.$notify({
                //   title: "提示",
                //   message: "用户登录成功",
                //   duration: 3000
                // });
              } else if (res.data.msg === "用户名密码不匹配") {
                this.logining = false;
                this.$message({
                  title: "提示",
                  message: "用户名密码不匹配",
                  duration: 3000,
                  type: "warning"
                });
              } else {
                this.logining = false;
                this.$message({
                  title: "提示",
                  message: "登录失败，请重试",
                  duration: 2000,
                  type: "error"
                });
              }
            })
            .catch(err => {
              this.logining = false;
              //请求错误后执行函数
              this.$message({
                title: "提示",
                message: "用户访问错误",
                duration: 3000,
                type: "error"
              });
              console.log(err);
            });
        } else {
          this.$refs.ruleForm.validateField("verifycode", verifycodeError => {
            if (verifycodeError) {
              this.identifyCode = "";
              this.makeCode(this.identifyCodes, 4);
              this.validateVerifycode = "";
              this.ruleForm.verifycode = "";
            }
          });
        }
      });
    },

    qiehuan: function() {
      return (
        (this.tab = 2),
        (this.identifyCode = ""),
        this.makeCode(this.identifyCodes, 4),
        this.activeName = "first"
      );
    },
    qiehuan2: function() {
      return (
        (this.tab = 1),
        (this.identifyCode = ""),
        this.makeCode(this.identifyCodes, 4),
        this.activeName = "first"
      );
    },
    qiehuan3: function() {
      return (
        (this.tab = 3),
        (this.identifyCode = ""),
        this.makeCode(this.identifyCodes, 4),
        this.activeName = "first"
      );
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //重置表单
    resettingForm(forName) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.logining3 = true;
          this.$axios({
            method: "POST",
            url: "/remakePw",
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            },
            data: {
              username: this.ruleForm.username,
              password: this.ruleForm.password,
              email: this.ruleForm.email,
              authCode: this.ruleForm.emailcode
            }
          })
            .then(res => {
              if (res.data.msg === "修改密码成功") {
                this.logining3 = false;
                this.$message({
                  title: "提示",
                  message: "修改密码成功，请登录",
                  duration: 2000
                });
              } else if (res.data.msg === "验证码过期，请重新获取") {
                this.logining3 = false;
                this.$message({
                  title: "提示",
                  message: "验证码过期，请重新获取",
                  duration: 2000,
                  type: "warning"
                });
              } else if (res.data.msg === "验证码不正确") {
                this.logining3 = false;
                this.$message({
                  message: "验证码错误",
                  type: "error"
                });
              } else {
                this.logining3 = false;
                this.$message({
                  title: "提示",
                  message: "重置失败，请重试",
                  duration: 2000,
                  type: "error"
                });
              }
            })
            .catch(() => {
              this.logining3 = false;
              this.$message({
                title: "提示",
                message: "请求超时，请检查网络连接",
                duration: 2000,
                type: "warning"
              });
            });
        } else {
          // ;
          // this.$message({
          //   title: "提示",
          //   message: "请重新尝试重置密码",
          //   type: "warning"
          // });
          return false;
        }
      });
    },
    //注册表单
    registerForm(ruleForm) {
      this.$refs.ruleForm.validate(valid => {
        if (valid && this.checked == true) {
          this.logining2 = true;
          this.$axios({
            method: "POST",
            url: "/register",
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            },
            data: {
              username: this.ruleForm.username,
              password: this.ruleForm.password,
              email: this.ruleForm.email,
              authCode: this.ruleForm.emailcode
            }
          })
            .then(res => {
              if (res.data.msg === "注册成功") {
                this.logining2 = false;
                this.$message({
                  title: "提示",
                  message: "注册成功，请登录",
                  duration: 2000,
                  type: "success"
                });
              } else if (res.data.msg === "用户已经存在") {
                this.logining2 = false;
                this.$message({
                  title: "提示",
                  message: "用户已经存在,请登录！",
                  duration: 2000,
                  type: "warning"
                });
              } else if (res.data.msg === "验证码不正确") {
                this.logining2 = false;
                this.$message({
                  message: "验证码错误",
                  type: "error"
                });
              } else if (res.data.msg === "验证码过期，请重新获取") {
                this.logining2 = false;
                this.$message({
                  message: "验证码过期，请重新获取",
                  type: "error"
                });
              } else {
                this.logining2 = false;
                this.$message({
                  title: "提示",
                  message: "注册失败",
                  duration: 2000,
                  type: "error"
                });
              }
            })
            .catch(() => {
              this.logining2 = false;
              this.$message({
                title: "提示",
                message: "请求超时，请检查网络连接",
                duration: 2000,
                type: "warning"
              });
            });
        } else if (valid && this.checked == false) {
          this.$message({
            title: "提示",
            message: "请勾选协议条款再进行注册！",
            type: "error"
          });
          return false;
        }
      });
    },
    //清空账号密码登录
    handleClick(ruleForm, telForm) {
      this.$refs[telForm].resetFields();
      this.$refs[ruleForm].resetFields();
      return (
        (this.rememberpwd = false),
        (this.identifyCode = ""),
        this.makeCode(this.identifyCodes, 4),
        (this.validateVerifycode = ""),
        (this.ruleForm.verifycode = "")
      );
    }
  }
};
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 75%;
  position: fixed;
}

.title1 {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
  font-size: 22px;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  width: 150px;
  text-align: left;
}

.check {
  display: flex;
  justify-content: space-between;
}
.check span {
  font-size: 14px;
}
.denglu {
  margin-top: -10px;
  margin-bottom: 20px;
}
.login-container {
  /* margin: 10% auto; */
  width: 400px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  text-align: left;
  /* box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1); */
}
.log {
  animation-delay: 0.05s;
  transition: all 0.15s;
  width: 1000px;
  background: #f7faff;
  margin: 8% auto;
  box-shadow: 0 0 20px 10px #7aa6f13f;
  display: flex;
  justify-content: center;
  height: 553.89px;
  overflow: hidden;
}
.res {
  margin-top: -60px;
  transition: all 0.15s;
}
.yanzheng {
  margin-bottom: -15px;
}
.icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  top: 24%;
  left: 290px;
  z-index: 2;
}
.otherway {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -5px;
}
</style>
